<template>
    <div class="sass-demo">
        <div class="header">
            <ul class="header-nav">
                <li>
                    <a href="">link_01</a>
                    <ul class="subNav">
                        <li>sub_01</li>
                        <li>sub_02</li>
                        <li>sub_03</li>
                        <li>sub_04</li>
                    </ul>
                </li>
                <li><a href="">link_02</a></li>
                <li><a href="">link_03</a></li>
                <li><a href="">link_04</a></li>
                <li><a href="">link_05</a></li>
                <li><a href="">link_06</a></li>
            </ul>
            <div class="header-search">
                <input type="text" class="searchCon">
                <a href="" class="searchBtn"></a>
            </div>
        </div>

        <div class="box"></div>
    </div>
</template>

<script>
    export default {
        name:"SassView"
    }
</script>

<style lang="scss" scoped>

    // sass最终还是会被解析为css

    // 注释
    /* css普通注释 => 会保留到编译后的文件。 */
    // sass静默注释  只保留在SASS源文件中，编译后被省略。

    // 变量  => 存储数据的容器,可以存储公共数据  => 所有变量以$开头。
    // 1. 可以作为属性值  -> sass解析过程中会将变量解析为对应的值
    // 2. 变量还可以和css选择器名, css属性名, css属性值拼接 => 插值语法 #{}

    @use "sass:math";
    
    $warm:#FFCCCC;
    $cold:#99CCCC;
    $primary:#0099CC;
    $success:#99CC00;
    $error: #FF6666;
    $grey:grey;

    $side:left;


    // 计算
    // 加法: 1. 一个有单位,一个没有单位  2. 两个有相同的单位
    // 减法: 1. 一个有单位,一个没有单位  2. 两个有相同的单位
    // 乘法: 1. 一个有单位,一个没有单位  
    // 除法: 1. 一个有单位,一个没有单位  2. 两个有相同的单位 => 去单位(倍数)



    // 函数
    @function pxtorem($val){  // 750px
        // @return ($val/100px)*1rem;  
        @return #{($val/100px)}rem;  // 7.5rem
    }



    
    body{
        font: 14px/18px;
    }


    // 默认情况下,sass解析嵌套语法时,会默认在子选择器的前面添加父选择器 => 将嵌套语法解析为包含选择器

    // &  => 父选择器修饰符(占位符)  => sass解析嵌套语法时遇到父选择器修饰符,不会将其解析为包含选择器, 将会用父选择器替换 &
    .header{
        width: 100%;
        height: 50px;
        margin-top: 20px;
        background-color: $grey;

        // & 会被替换为父选择器  .header
        //  解析后 .header-nav
        &-nav{
            float: left;
            line-height: 50px;

            // & 会被替换为父选择器 .header .header-nav
            // 解析后: .header .header-nav>li
            & > li{
                position: relative;
                float: left;

                //  & 会被替换为付选择器  .header .header-nav li
                // 合起来: .header .header-nav li:hover
                &:hover{
                    background-color: $error;
                    color: #fff;

                    .subNav{
                        display: block;
                    }
                }

                a{
                    padding: 0 20px;
                }

                .subNav{
                    position: absolute;
                    left: 0;
                    top: 50;
                    width: 200px;
                    background-color: $success;
                    color:#fff;
                    text-indent: 20px;
                    display: none;
                }
            }
        }

        .header-search{
            float: right;
        }

    }

  

    .header-#{$side}{
        float: left;
        border-#{$side}:1px solid $error;
    }

    .box{
        width: 200px+20;
        width: 200px-20;
        width: 200px*2;
        // width: (200px/2);  // 老版本
        width: math.div(200px,2);  // 新版本
        width: (200px/2px);  // 100
        width: pxtorem(750px);
        padding: 10px;
    }


</style>